﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>接口测试</title>
    <script type="text/javascript" src="~/Common/js/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="~/Common/js/vue.min.js"></script>
    <style>
        * {
            margin: 0;
            box-sizing: border-box;
        }

        .-block {
            float: left;
            width: 50%;
        }
        .-block-title {
            background-color:#004b68;
            color:#fff;
        }
        .-block-content {
            width: 100%;
            height: 80vh;
        }
        .-selected {
            background-color: chocolate;
        }
    </style>
</head>
<body style="background-color:#e4dfd6">
    <div id="app" style="height:100vh;overflow:hidden">
        <div style="padding: 1em; background-color:#444;color:#fff;">
            <span>接口测试</span>
            <button v-on:click="updateDatabase()" style="float:right;">一键更新数据库</button>
        </div>
        <div style="float:left;width:15%;padding:5px;background-color:dimgray;height:100vh;">
            <p>
                <input type="text" v-model="name_input" style="width:60%;" placeholder="测试名称" />
                <button v-on:click="handleNew()" style="width:35%;">新建</button>
            </p>
            <div style="overflow-y:auto;">
                <p v-for="(item, index) in apis" v-on:click="handleApply(index)" :class="{'-selected': query_data.name == apis[index].name}" style="margin:2px;padding:2px;color:white;cursor:pointer;">
                    <span>{{item.name}}</span>
                    <button v-on:click.stop="handleApisDelete(index)" style="float:right;">-</button>
                </p>
            </div>
        </div>
        <div style="float:left;width:85%;">
            <div style="width:100%;float:left;padding: 0.5em;">
                <span>/api/</span>
                <input type="text" v-model="query_data.url" />
                <button v-on:click="request('post')">POST请求</button>
                <span>{{this.message}}</span>
            </div>
            <div style="width:100%;float:left;">
                <div class="-block">
                    <div class="-block-title">
                        <span>请求参数</span>
                    </div>
                    <div>
                        <div style="float:left;padding-left:10px;">
                            <input type="checkbox" v-model="exception" />
                            <span>抛出异常</span>
                        </div>
                        <div style="float:left;padding-left:10px;">
                            <input type="checkbox" v-model="ignore_token"/>
                            <span>忽略token</span>
                        </div>
                        <div style="float:left;padding-left:10px;">
                            <input type="checkbox" v-model="exemption" />
                            <span>免权限检测</span>
                        </div>
                    </div>
                    <div class="-block-content" id="require" style="padding:0.5em;overflow:auto;">
                        <p v-for="(item, index) in query_data.data">
                            <button v-on:click="handleDelete(index)">-</button>
                            <span>参数</span>
                            <input v-model="item.key" style="width:30%"/>
                            <span>值</span>
                            <input v-model="item.value" style="width:40%" />
                        </p>
                        <p>
                            <button v-on:click="handleAdd()">+</button>
                            <button v-on:click="handleEmpty()">清空</button>
                        </p>
                        <pre style="padding:0.5em;margin:0.5em;background-color:#bbb;">{{JSON.stringify(data, null, 4)}}</pre>
                        <div style="color:#888;margin-top:20px;">
                            <p>抛出异常：当无法确定错误原因时使用</p>
                            <p>忽略token：接口需要token验证时使用，将忽略对token的验证</p>
                            <p>免权限检测：不会进行权限检测，配合接口逻辑仔细使用</p>
                        </div>
                    </div>
                </div>
                <div class="-block">
                    <div class="-block-title">返回结果</div>
                    <pre class="-block-content" v-html="result" style="padding:0.5em;background-color:#89bcd9;overflow:auto;"></pre>
                </div>
            </div>
        </div>
    </div>
</body>
<script type="text/javascript">
    var vm = new Vue({
        el: "#app",
        data: {
            name_input: "",
            message: "",
            query_data: {},
            result: {},
            apis: [],
            exception: false,
            ignore_token: false,
            exemption: false
        },
        computed: {
            data: function () {
                var temp = {};
                this.query_data.data.forEach(function (item) {
                    temp[item.key] = item.value;
                });
                if (this.exception) temp.exception = this.exception;
                if (this.ignore_token) temp.ignore_token = this.ignore_token;
                if (this.exemption) temp.exemption = this.exemption;
                return temp;
            }
        },
        methods: {
            // 请求函数
            request: function (method) {
                this.ajax("/api/" + this.query_data.url, this.data);
                this.saveToLocalStorage();
            },
            updateDatabase: function () {
                this.ajax('api/database/init');
            },
            ajax: function (url, data) {
                var that = this;
                this.message = "正在请求....";
                $["post"](url, data, function (res) {
                    console.log(res);
                    that.result = res;
                    that.message = "";
                });
            },
            // 参数函数
            handleAdd: function () {
                this.query_data.data.push({key:"", value:""});
            },
            handleDelete: function (index) {
                this.query_data.data.splice(index, 1);
            },
            handleEmpty: function (index) {
                this.query_data.data = [];
            },
            // apis
            handleNew: function () {
                if (this.name_input.trim() == "") {
                    alert("请填写名称");
                    return;
                }
                for (var i = 0, len = this.apis.length; i < len; i++) {
                    if (this.name_input == this.apis[i].name) {
                        alert("名称已存在");
                        return;
                    }
                }
                this.query_data = { name: this.name_input, url: "", data: [] };
                this.apis.push(this.query_data);
                this.name_input = "";
                this.saveToLocalStorage();
            },
            handleApisDelete: function (index) {
                var b = this.query_data.name == this.apis[index].name;
                this.apis.splice(index, 1);
                this.saveToLocalStorage();
                this.selectOne(b,index - 1);
            },
            handleApply: function (index) {
                this.saveToLocalStorage();
                this.query_data = this.apis[index];
            },
            selectOne: function (b, index) {
                if (index < 0) index = 0;
                if (this.apis.length == 0) {
                    this.name_input = "默认";
                    this.handleNew();
                }
                if (!b) return;
                this.query_data = this.apis[index];
            },
            saveToLocalStorage: function () {
                localStorage.apis = JSON.stringify(this.apis);
            }

        },
        created() {
            if (localStorage.apis) {
                this.apis = JSON.parse(localStorage.apis);
            }
            this.selectOne(true, 0);
        }
    });









    //var query_data = {};
    //jQuery.ajaxSettings.data = {
    //    token: "qwertuyiadsfghjk"
    //}
    //function request(method) {
    //    var require_json;
    //    try {
    //        eval("require_json = " + $("#require").val());
    //        var url = $("#url").val();
    //        $("#result").html("接口" + url + "请求已发送");
    //        $[method]("/api/" + url, require_json, function (res) {
    //            console.log(res);
    //            $("#result").html(JSON.stringify(res, null, 4));
    //        });
    //    } catch (err) {
    //        $("#result").html(err.message);
    //    }
    //}
    //$("#get_btn").click(function () {
    //    request("get");
    //});
    //$("#post_btn").click(function () {
    //    request("post");
    //});
    //$("#update_database_btn").click(function () {
    //    $("#url").val("database/init");
    //    request("post");
    //});
    //$("#add_btn").click(function () {
    //    $("#url").val("database/init");
    //    request("post");
    //});
    //$("#delete_btn").click(function () {
    //    $("#url").val("database/init");
    //    request("post");
    //});

    //$("#require").val("{\n\t\n\t\"exemption\": 1 // 1免检，0有权限检测\n}");
</script>
</html>
